<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title></title>
    <script src="js/jquery-3.1.1.js">
        
    </script>
    <style>
    *{
        box-sizing: border-box;
       
    }
        div{
            width: 320px;
            box-shadow: 0 0 10px lightgray;
            margin: 10px auto;
        }
        ul,li,p,h4{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        h4{
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-bottom: 2px solid black;
        }
        ul{
            padding: 0px 20px 20px;
            overflow: hidden;
        }
        li{
            width: 120px;
            height: 75px;
            margin: 10px;
            overflow: hidden;
            float: left;
            border:1px solid lightgray;
            position: relative;
        }
        img{
            width: 100%;
            height: 100%;
        }
        li{
            transition: animate 5s linear;
            transform-style: preserve-3d;
        }
       li:hover{
           /*transform: rotateX(180deg)   */
        }
        
        p{
            position: absolute;
            width: 100%;
            height: 100%;
            top:0;
            left:0;
            text-align: center;
            line-height: 75px;
            background-color: sandybrown;
            z-index:-10;
            
        }
       .rotate{
           transform: rotateY(10deg);
           transform: rotateX(170deg) ;
       }
    </style>
</head>
<body>
    <div>
        <h4>热门品牌推荐</h4>
    <ul>
        <li>
            <img src="images/11.jpg" alt="">
            <p>肌龄</p>
        </li>
        <li>
            <img src="images/22.jpg" alt="">
            <p>肌龄</p>
        </li>
        <li>
            <img src="images/33.jpg" alt="">
            <p>肌龄</p>
        </li>
        <li>
            <img src="images/44.jpg" alt="">
            <p>肌龄</p>
        </li>
        <li>
            <img src="images/55.jpg" alt="">
            <p>肌龄</p>
        </li>
        <li>
            <img src="images/66.jpg" alt="">
            <p>肌龄</p>
        </li>
        <li>
            <img src="images/77.jpg" alt="">
            <p>肌龄</p>
        </li>
        <li>
            <img src="images/88.jpg" alt="">
            <p>肌龄</p>
        </li>
    </ul>
    </div>
</body>
</html>
<script>
    $('li').hover(function(){
       $(this).addClass('rotate')   
        $('p',this).addClass('rotate') 
       $('p',this)[0].style.zIndex = 10;  
    },function(){
        $(this).removeClass('rotate')
         $('p',this).removeClass('rotate') 
         $('p',this)[0].style.zIndex = -10;
    })
</script>